<div class="content-section introduction">
    <div>
        <span class="feature-title">SelectButton</span>
        <span>SelectButton is used to choose single or multiple items from a list using buttons.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Single</h3>
    <p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>

    <p>Selected Type: {{selectedType}}</p>

    <h3>Multiple</h3>
    <p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
    <p>Selected Types: <span *ngFor="let type of selectedTypes">{{type}} </span></p>

    <hr />

    <button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"></button>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SelectButtonModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Two-way value binding is defined using ngModel and selectbutton requires a collection of options 
                where each option should follow the SelectItem interface that defines label-value properties.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="cities" [(ngModel)]="selectedCity"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SelectItem&#125; from 'primeng/primeng';

export class MyModel &#123;

    cities: SelectItem[];

    selectedCity: string;

    constructor() &#123;
        this.cities = [];
        this.cities.push(&#123;label:'New York', value:'New York'&#125;);
        this.cities.push(&#123;label:'Rome', value:'Rome'&#125;);
        this.cities.push(&#123;label:'London', value:'London'&#125;);
        this.cities.push(&#123;label:'Istanbul', value:'Istanbul'&#125;);
        this.cities.push(&#123;label:'Paris', value:'Paris'&#125;);
    &#125;

&#125;
</code>
</pre>

            <h3>Multiple</h3>
            <p>SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. 
                In multiple case, model property should be an array instance that is not null or undefined.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="cities" [(ngModel)]="selectedCities"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SelectItem&#125; from 'primeng/primeng';

export class MyModel &#123;

    cities: SelectItem[];

    selectedCities: string[] = [];

    constructor() &#123;
        this.cities = [];
        this.cities.push(&#123;label:'New York', value:'New York'&#125;);
        this.cities.push(&#123;label:'Rome', value:'Rome'&#125;);
        this.cities.push(&#123;label:'London', value:'London'&#125;);
        this.cities.push(&#123;label:'Istanbul', value:'Istanbul'&#125;);
        this.cities.push(&#123;label:'Paris', value:'Paris'&#125;);
    &#125;

&#125;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>SelectButton can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="cities" formControlName="selectedCity"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>options</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of selectitems to display as the available options.</td>
                        </tr>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, allows selecting multiple values.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>onChange</td>
                        <td>event.originalEvent: browser event<br />
                            event.value: single value or an array of values that are selected
                        </td>
                        <td>Callback to invoke when value changes.</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/selectbutton" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Single&lt;/h3&gt;
&lt;p-selectButton [options]="types" [(ngModel)]="selectedType"&gt;&lt;/p-selectButton&gt;

&lt;p&gt;Selected Type: {{selectedType}}&lt;/p&gt;

&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"&gt;&lt;/p-selectButton&gt;
&lt;p&gt;Selected Types: &lt;span *ngFor="let type of selectedTypes"&gt;{{type}} &lt;/span&gt;&lt;/p&gt;

&lt;hr /&gt;

&lt;button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class SelectButtonDemo &#123;

    types: SelectItem[];

    selectedType: string;

    selectedTypes: string[] = ['Apartment','Studio'];

    constructor() &#123;
        this.types = [];
        this.types.push(&#123;label: 'Apartment', value: 'Apartment'&#125;);
        this.types.push(&#123;label: 'House', value: 'House'&#125;);
        this.types.push(&#123;label: 'Studio', value: 'Studio'&#125;);
    &#125;

    clear() &#123;
        this.selectedType = null;
        this.selectedTypes = [];
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>